<template>
  <div class="home_container">

    <!--搜索框-->
    <van-row class="navBar">
      <van-col span="2" class="leftIcon"></van-col>
      <van-col span="16" class="center">
        <van-icon name="search" class="search"/>
        <input type="text" class="inputItem" placeholder="请输入搜索关键词" v-model="searchValue"/>
      </van-col>
      <van-col span="6" class="rightBtn">
        <van-button @click="onSearch" type="info" size="small" class="searchBtn">搜索</van-button>
      </van-col>
    </van-row>

    <!--轮播图-->
    <div class="home-swipe">
      <div class="home-swipe-head">
        <span class="recommend">今日推荐</span>
        <span class="tips">每天都有新发现</span>
        <span class="swipe-num">
          <span class="indexPage">{{ indexPage + 1 }}</span>
          <span class="pageNum">/4</span>
        </span>
      </div>
      <van-swipe :autoplay="3000" @change="changeSwipe">
        <van-swipe-item v-for="(item,index) in imagesBanner" :key="index">
          <img :src="item.url" height="100%" alt="图片加载失败"/>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 热销商品-->
    <goods-item describe="每日热销指南" moreLink="/more/hotSell" title="热销榜">
      <ul class="hot-ul">
        <li @click="showGood(item.id)" class="sale-item" v-for="item in hotGoods" :key="item.id">
          <img :src="item.imageUrl" alt="加载失败"/>
          <div class="sale-name">{{ item.name }}</div>
          <div class="sale-price">{{ item.salePrice | moneyFormat() }}</div>
        </li>
      </ul>
    </goods-item>

    <!--折扣商品-->
    <goods-item describe="前所未有的折扣" moreLink="/more/saleSell" title="低价促销">
      <ul class="sale-ul">
        <li :key="item.id" @click="showGood(item.id)" class="li-item" v-for="(item) in saleGoods">
          <div class="img">
            <img :src="item.imageUrl" alt="加载失败"/>
          </div>
          <div class="title">{{ item.name }}</div>
          <div class="price">
            <span class="new-price">{{ item.salePrice | moneyFormat() }}</span>
            <span class="old-price">
              <del>{{ item.price | moneyFormat() }}</del>
            </span>
          </div>
        </li>
      </ul>
    </goods-item>

    <!--发现商品-->
    <goods-item describe="发现更多优质好货" title="发现">
      <ul class="discover-ul">
        <background-img :class="index===0?'discover-img':''" :desc="item.description" :imgSrc="item.imageUrl"
                        :key="item.id"
                        :topic="item.name"
                        @click.native="showGood(item.id)"
                        class="discover-li"
                        v-for="(item,index) in discoverGoods.slice(0,2)"></background-img>
      </ul>
      <ul class="discover-ul">
        <background-img :desc="item.description" :imgSrc="item.imageUrl" :key="item.id" :topic="item.name"
                        @click.native="showGood(item.id)"
                        class="discover-li"
                        v-for="item in discoverGoods.slice(2,5)"></background-img>
      </ul>
    </goods-item>

    <!--精选分类-->
    <goods-item describe="你要的分类这里都有" title="精品分类">
      <van-tabs v-model="activeName" :ellipsis="flag" title-active-color="blue" :animated="flag" :swipeable="flag"
                @change="getGivenClassifyInfo">
        <van-tab :title="item.name" :name="item.id" v-for="item in classifyTabs" :key="item.id">
          <tab-item :data="classifyGoods" @showGood="showGood"></tab-item>
        </van-tab>
      </van-tabs>
    </goods-item>

  </div>
</template>

<script>
import goodsItem from "@/components/goodsItem";
import filter from "@/filters/filter.js";
import backgroundImg from "@/components/backgroundImg";
import tabItem from "@/components/tabItem";

export default {
  name: "Index",

  data() {
    return {
      searchValue: "",
      indexPage: 1,
      // 轮播图地址
      imagesBanner: [],

      // 热销商品数据
      hotGoods: [],
      // 折扣商品数据
      saleGoods: [],
      // 发现商品数据
      discoverGoods: [],

      // 表示精品分类的当前标签页
      activeName: 1,

      // 表示所有要开启属性为true的值
      flag: true,

      //分类标签页
      classifyTabs: [],
      // 分类书籍数据
      classifyGoods: []
    };
  },

  created() {
    this.getHotGoods();
    this.getSaleGoods();
    this.getDiscoverGood();
    this.getAllClassify();
    this.getBannerImage();
  },

  filters: {
    moneyFormat(money) {
      return filter.moneyFormat(money);
    }
  },

  components: {goodsItem, backgroundImg, tabItem},

  methods: {
    //获取轮播图地址
    async getBannerImage() {
      let res = await this.$axios.get(this.$api.getBannerImage);
      if (res.status === 200 && res.data.code === 200) {
        this.imagesBanner = res.data.data;
      } else {
        this.$toast.fail(res.data.message);
      }
    },

    //获取热卖商品
    async getHotGoods() {
      let res = await this.$axios.post(this.$api.getHotGoods);
      if (res.status === 200 && res.data.code === 200) {
        this.hotGoods = res.data.data;
      } else {
        this.$toast.fail("热卖商品加载失败");
      }
    },

    //获取折扣商品
    async getSaleGoods() {
      let res = await this.$axios.post(this.$api.getSaleGood)
      if (res.status === 200 && res.data.code === 200) {
        this.saleGoods = res.data.data;
      } else {
        this.$toast.fail("折扣商品加载失败");
      }
    },

    //获取发现商品
    async getDiscoverGood() {
      let res = await this.$axios.post(this.$api.getDiscoverGood)
      if (res.status === 200 && res.data.code === 200) {
        this.discoverGoods = res.data.data;
      } else {
        this.$toast.fail("发现商品加载失败");
      }
    },

    //获取精品分类的标签页
    async getAllClassify() {
      let res = await this.$axios.get(this.$api.getAllClassify);
      if (res.status === 200 && res.data.code === 200) {
        this.classifyTabs = res.data.data;
        await this.getGivenClassifyInfo();
      } else {
        this.$toast.fail(res.data.message);
      }
    },

    //分类页的改变
    async getGivenClassifyInfo() {
      let res = await this.$axios.post(this.$api.getGivenClassifyInfo, {CateGoryID: this.activeName})
      if (res.status === 200 && res.data.code === 200) {
        this.classifyGoods = [];
        this.classifyGoods = res.data.data;
      } else {
        this.$toast.fail(res.data.message);
      }
    },

    //显示书本详情
    showGood(bookId) {
      this.$router.push({path: "/goodsDetail", query: {bookId: bookId}});
    },

    // 搜索
    onSearch() {
      localStorage.setItem('search', this.searchValue);
      this.$router.push('/search');
    },

    // 轮播图index
    changeSwipe(index) {
      this.indexPage = index;
    },

  }
};
</script>

<style lang="less" scoped>

.home_container {
  background-color: #fafafa;
  margin-bottom: 50px;

  .navBar {
    height: 2.8rem;
    padding: 0.4rem .5rem;
    box-sizing: border-box;
    background-color: #fff;

    .leftIcon {
      height: 100%;
      text-align: center;

      .icon {
        margin-top: 65%;
        transform: translateY(-50%);
      }
    }

    .center {
      position: relative;
      box-sizing: border-box;
      height: 100%;

      .inputItem {
        background-color: #f5f5f5;
        padding: 0;
        padding-left: 1.5rem;
        margin: 0;
        height: 100%;
        width: 100%;
        border: none;
        font-size: .7rem;
      }

      .search {
        position: absolute;
        top: 50%;
        left: .4rem;
        transform: translateY(-50%);
      }
    }

    .rightBtn {
      height: 100%;

      .searchBtn {
        margin-left: 42%;
      }
    }
  }

  .home-swipe {
    box-sizing: border-box;
    padding: 4px 6px;
    background-color: #fff;
    border-bottom: 1px solid #dedede;

    .home-swipe-head {
      padding: 4px 0;

      .recommend {
        font-weight: 700;
      }

      .tips {
        font-size: 12px;
        margin-left: 6px;
        color: #8f8f8f;
      }

      .swipe-num {
        float: right;

        .indexPage {
          font-weight: 700;
        }

        .pageNum {
          font-size: 12px;
          color: #8f8f8f;
        }
      }
    }

    .van-swipe {
      height: 136px;

      img {
        width: 100%;
      }
    }
  }

  .hot-ul {
    display: flex;

    .sale-item {
      flex-grow: 1;
      width: 25%;
      overflow: hidden;
      padding: 2px 4px;

      img {
        height: 100px;
      }

      .sale-name {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding-left: .3rem;
        white-space: nowrap;
      }

      .sale-price {
        padding-left: .3rem;
        color: #ff4c0a;
        font-size: 14px;
      }
    }
  }

  .sale-ul {
    display: flex;
    margin-bottom: 4px;

    .li-item {
      flex-grow: 1;
      width: 25%;
      overflow: hidden;
      padding: 2px 4px;

      img {
        height: 100px;
      }

      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
        white-space: nowrap;
      }

      .new-price {
        font-size: 14px;
        color: #ff4c0a;
      }

      .old-price {
        font-size: 12px;
        color: #333;
        margin-left: 6px;
      }
    }
  }

  .discover-ul {
    display: flex;
    height: 100px;
    margin-bottom: 4px;

    .discover-img {
      width: 100px;
    }

    .discover-li {
      flex-grow: 1;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
